<!-- 文章列表内容文件 -->
<template>
  <div class="articleTabulation" v-loading="loading" element-loading-text="拼命加载中">
    <!-- 标题 -->
    <div class="title">
      <h3>文章列表</h3>
    </div>
    <!-- 表格 -->
    <div class="table-connect">
      <div class="ArticleOpt">
        <!-- 选择框 -->
        <div>
          <el-form :model="form" :inline="true" :rules="rules" ref="form">
            <!-- 文章分类下拉框 -->
            <el-form-item label="文章分类" prop="cate_id">
              <el-select v-model="form.cate_id" placeholder="已选择的选项">
                <el-option v-for="item in cate_idArray" :key="item.id" :label="item.cate_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 发布状态下拉框 -->
            <el-form-item label="发布状态" prop="state">
              <el-select v-model="form.state" placeholder="请选择状态">
                <el-option v-for="item in stateArray" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 筛选按钮 -->
            <el-form-item>
              <el-button class="addArticleColoe screen" size="medium" type="primary"
                @click="screen(form.valueTwo)">筛选</el-button>
            </el-form-item>

            <!-- 重置按钮 -->
            <el-form-item>
              <el-button class="reset" type="info" size="medium" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
        <!-- 发布按钮 -->
        <el-button type="primary" size="medium" class="addArticleColoe addArticle" @click="torouter">发表文章</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="文章标题" width="600">
        </el-table-column>
        <el-table-column prop="cate_name" label="分类">
        </el-table-column>
        <el-table-column prop="pub_date" label="发表时间">
        </el-table-column>
        <el-table-column prop="state" label="状态">
        </el-table-column>
        <el-table-column label="操作" width="166">
          <template #default="obj">
            <el-button class="addArticleColoe" size="mini" type="primary" @click="putArticle(obj.row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="SetID(obj.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 删除弹框 -->
      <el-dialog title="title" :visible.sync="dialogVisible" width="25%">
        <!-- 删除文章 -->
        <div slot="title" class="header-title" style="display: flex;align-items: center;">
          <span class="title-name">
            <i class="el-icon-warning" style="color: red;margin-right:10px;font-size: 24px;"></i>
          </span>
          <span class="title-age"
            style="font-size: 16px;color: rgba(0,0,0,0.90);line-height: 24px;font-weight: 500;">提示</span>
        </div>
        <span style="padding-left: 20px;">确定要删除本条信息吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
          <el-button class="addArticleColoe" type="primary" size="medium" @click="DelArticle(id)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页功能 -->
      <div class="block">
        <!--
          @size-change 下拉框变化时触发
          @current-change  点击页码时触发
          page-sizes  下拉选择每页显示的数据
          total 总条数
          page-size 每页条数
         -->
        <el-pagination :page-sizes="[1, 5, 10, 20]" :page-size="pagesize" :current-page="pagenum"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <!-- 修改文章内容的滑块 -->
    <el-drawer v-if="visible" title="修改文章内容" :visible.sync="visible" direction="rtl" :before-close="handleClose"
      size="60%">
      <!-- 标题 -->
      <el-form label-width="80px" :model="articleform" :rules="rules" ref="articleform">
        <el-form-item label="文章标题" prop="title">
          <el-input placeholder="请输入标题" v-model="articleform.title"></el-input>
        </el-form-item>
        <!-- 分类 -->
        <el-form-item label="文章分类" prop="cate_id">
          <el-select v-model="articleform.cate_id" placeholder="已选择的选项">
            <el-option v-for="item in cate_idArray" :key="item.id" :label="item.cate_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="content">
          <quill-Editor @change="$refs.articleform.validateField('content')" v-model="articleform.content"
            :options="editorOption"></quill-Editor>
        </el-form-item>
        <el-form-item label="文章封面" class="el-form-item-upload" prop="cover_img">
          <el-upload action="#" list-type="picture" :auto-upload="false" :on-change="fn2" :show-file-list="false"
            v-model="articleform.cover_img">
            <div class="iBox">
              <el-button type="primary" size="medium" class="fmBox">选择封面</el-button>
              <!-- <i slot="default" class="el-icon-plus"><span>选择封面</span></i> -->
            </div>
            <div v-if="articleform.cover_img_url.url" class="uploadBox" v-loading="loadingImg"
              element-loading-text="拼命加载中">
              <img :src="articleform.cover_img_url.url" width="496px" height="252px">
            </div>
            <div v-else class="uploadBox">
              <span>点击上方 "选择封面"</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="release" class="addArticleColoe">发布</el-button>
          <el-button type="info" size="medium" @click="draft"
            style="background: #EAECF5;border-radius: 3px;border: none;color: #0052D9;">存为草稿</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
// 导入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { GetArticle, DelArticle, GetArticleAssort, GetArticleId, PutArticleId } from '@/api/user'
import store from '@/store'
export default {
  name: 'articleTabulation',
  components: {
    quillEditor
  },
  async created () {
    const cateArray = await GetArticleAssort()
    this.cate_idArray = cateArray.data.data
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.$emit('setIndexisSHow', true)
    const res = await GetArticle({
      pagenum: this.pagenum,
      pagesize: this.pagesize
    })
    // console.log(res.data)
    this.total = res.data.total
    this.tableData = res.data.data
    this.loading = false
    console.log(this.tableData)
    for (let i = 0; i < this.tableData.length; i++) {
      // 将字符串转为中国标准时间
      this.tableData[i].pub_date = new Date(this.tableData[i].pub_date)
      // 将中国标准时间拆分为 年 月 日 时 分 秒 拼接
      this.tableData[i].pub_date = this.tableData[i].pub_date.getFullYear() + '-' + (this.tableData[i].pub_date.getMonth() + 1) + '-' + this.tableData[i].pub_date.getDate() + ' ' + this.tableData[i].pub_date.getHours() + ':' + this.tableData[i].pub_date.getMinutes() + ':' + this.tableData[i].pub_date.getSeconds()
    }
  },
  data () {
    return {
      // 富文本提示内容
      editorOption: {
        placeholder: '这里可以填写内容......'
      },
      // 控制滑块的显示隐藏
      visible: false,
      // 弹框显示
      dialogVisible: false,
      // 表格数据
      tableData: [],
      // 下拉框数据
      // 存储文章分类数据
      cate_idArray: '',
      stateArray: [{
        value: '已发布',
        label: '已发布'
      }, {
        value: '草稿',
        label: '草稿'
      }],
      form: {
        // 存放文章id
        id: '',
        // 处理筛选请求
        state: '',
        cate_id: ''
      },
      articleform: {

      },
      // 总条数
      total: '' || 0,
      // 当前页
      pagenum: 1,
      // 每页条数
      pagesize: 5,

      // 处理加载情况
      loading: true,
      rules: {
        state: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        cate_id: [
          { required: true, message: '请选择发布状态', trigger: 'change' }
        ],
        title: [
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,30}$/, message: '长度为 1 ~ 10位', trigger: ['blur', 'change'] },
          { required: true, message: '标题长度为 1 ~ 30 个字符', trigger: ['change', 'blur'] }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: ['change', 'blur'] }
        ],
        cover_img: [
          { required: true, message: '请选择封面,，只能是图片文件', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    // 将图片显示
    fn2 (file) {
      // 截取时间戳后8位
      this.form.cate_id = new Date().getTime().toString().slice(-8)
      this.loadingImg = true
      this.articleform.cover_img_url = file
      this.loadingImg = false
      this.articleform.cover_img = file.raw
    },
    async fn () {
      const res = await GetArticle({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        state: this.form.state,
        cateid: this.form.cate_id
      })
      this.total = res.data.total
      this.tableData = res.data.data
      this.loading = false
    },
    // 筛选功能
    async screen (state) {
      await this.$refs.form.validate()
      this.pagenum = 1
      this.loading = true
      this.fn()
    },
    // 重置功能
    async reset () {
      await this.$refs.form.resetFields()
      this.loading = true
      const res = await GetArticle({
        pagenum: 1,
        pagesize: 5
      })
      this.tableData = res.data.data
      this.pagenum = 1
      this.pagesize = 5
      this.state = ''
      this.total = res.data.total
      this.loading = false
    },
    async handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.loading = true
      this.pagesize = val
      // 每页条数变化时重新发送请求
      this.fn()
    },
    async handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.loading = true
      this.pagenum = val
      // 当前页变化时重新发送请求
      this.fn()
    },
    // 跳转至发布文章路由
    torouter () {
      this.$router.push('/publish')
    },
    SetID (id) {
      this.id = id
      // console.log(this.id)
      this.dialogVisible = true
    },
    // 删除文章
    async DelArticle (id) {
      this.loading = true
      const res = await DelArticle(id)
      if (res.data.message !== '删除成功！') {
        this.$message.error(res.data.message)
      } else {
        this.$message.success(res.data.message)
      }
      // 处理删除当前页最后一条跳转至前一页
      if (this.tableData.length === 1) {
        this.pagenum--
      }
      this.fn()
      this.dialogVisible = false
    },
    // 修改文章内容
    async putArticle (id) {
      const res = await GetArticleId(id)
      this.articleform = res.data.data
      this.articleform.cover_img = ''
      this.articleform.cover_img_url = ''
      this.visible = true
    },
    async release () {
      await this.$refs.articleform.validate()
      this.articleform.state = '已发布'
      try {
        const res = await PutArticleId(this.articleform)
        this.$message.success(res.data.message)
        this.visible = false
        this.reset()
      } catch (error) {
        console.log(error)
        if (error.response.status === 500) {
          this.$message.error('封面文件过大请重新选择...')
        }
      }
    },
    async draft () {
      await this.$refs.articleform.validate()
      this.articleform.state = '草稿'
      try {
        const res = await PutArticleId(this.articleform)
        this.$message.success(res.data.message)
        this.visible = false
        this.reset()
      } catch (error) {
        console.log(error)
        if (error.response.status === 500) {
          this.$message.error('封面文件过大请重新选择...')
        }
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  }
}
</script>

<style lang="less" scoped>
.articleTabulation {

  .table-connect {
    padding: 23px 30px;
    border-radius: 4px 4px 0px 0px;
    background: #fff;

    .ArticleOpt {
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .screen,
      .reset {
        width: 60px;
        height: 32px;
        padding: 0;
      }

      .reset {
        font-size: 14px;
        color: #0052D9;
        background: #EAECF5;
        border: none;
      }

      .reset:hover {
        background: #F5F6FA;
      }

      span {
        margin-right: 18px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.40);
        text-align: left;
        font-weight: 400;
      }

      .addArticle {
        width: 88px;
        height: 32px;
        padding: 0;

      }

      .el-select {
        margin-right: 20px;

        /deep/ .el-input__inner {
          width: 240px;
          height: 32px;
        }

      }
    }

    .addArticleColoe {
      border: none;
      background: #4F81FF;
      border: 0px;
    }

    .addArticleColoe:hover {
      background: #608DFF;
    }

    /deep/ tr,
    /deep/ th,
    /deep/ td {
      padding-left: 10px;
    }

    /deep/ td:last-child {
      padding-left: 0;
      text-align: center;
    }

    .block {
      margin-top: 30px;
    }
  }
}

/deep/ .el-dialog__body {
  padding: 20px 20px 0 20px;
}

/deep/ .el-drawer__body {
  padding: 0 20px;
}

/deep/ .el-drawer__header {
  font-size: 20px;
  color: black;
}

/deep/ .el-upload {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #4F81FF;
  line-height: 22px;
  font-weight: 400;

  .iBox {
    margin-bottom: 16px;
    text-align: left;

    .fmBox {
      background: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(220, 220, 220, 1);
      border-radius: 3px;
      color: black;
    }
  }

  span {
    margin-left: 5px;
  }
}

.uploadBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 496px;
  height: 252px;
  background: #EEEEEE;
  background: #F5F6FA;
  border-radius: 0px 0px 2px 2px;

  span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.40);
    text-align: center;
    line-height: 22px;
    font-weight: 400;
    transition: all 0.3 linear;

  }

  img {
    border-radius: 0px 0px 2px 2px;
    transition: all 0.3 linear;

  }
}
</style>
